function initFilterSearch() {
    if(!gugeeGobal.isMobile) {
        initSelectItem()
        initInputEvent()
    }

    initChechboxEvent()
}
function initSelectItem () {
    const selectItems = document.querySelectorAll('.select-item > li')
    selectItems.forEach(item => {
        item.addEventListener('click', e => {
            if(!e.target.classList.contains('is-active')) {
                const parentEle = e.target.parentElement
                parentEle.querySelector('.is-active').classList.remove('is-active')
                e.target.classList.add('is-active')
                params.page = 1
                const paramKey = parentEle.getAttribute('data-param-key')
                const value = e.target.getAttribute('value')
                const isDefault = value && value !== '0'
                if(isDefault) {
                    params[paramKey] = value
                } else {
                    params[paramKey] = undefined
                }
                const label = e.target.parentElement.previousElementSibling || e.target.parentElement.parentElement.previousElementSibling
                filterSelectedWrapEvent(e, {
                    label: label.innerText.replace(':',''),
                    paramKey: paramKey,
                    value: isDefault ? e.target.innerText : undefined
                })
                searchUser()
            }
        })
    })
}
function initInputEvent() {
    const inputs = document.querySelectorAll('main .gd-input')
    inputs.forEach(input => {
        input.addEventListener('focus', () => {
            if(gugeeGobal.roleId < 3) {
                let config = {
                    class: '',
                    content: 'Only available for ADVANCED version users or higher,upgrade now!',
                    confirmBtnText: 'Upgrade',
                    confirmBtn: {
                        event: () => {
                            showLoading()
                            window.location.href = '/pricing?refer=' + window.location.href
                        }
                    },
                    cancelBtnText: 'Not Now',
                }
                showModal(config)
            }
        })
        input.addEventListener('blur', e => {
            params[e.target.name] = e.target.value
            params.page = 1

            const label = e.target.parentElement.previousElementSibling || e.target.parentElement.parentElement.previousElementSibling
            filterSelectedWrapEvent(e, {
                label: label.innerText.replace(':',''),
                paramKey: name,
                value: e.target.value
            })
            searchUser()
        })
        if(!gugeeGobal.isMobile) {
            input.addEventListener('keydown', e => {
                if(e.key === 'Enter') {
                    input.blur()
                }
            })
        }
    })
}

function initChechboxEvent() {
    const groups = document.querySelectorAll('.gd-checkbox-group')
    groups.forEach(group => {
        const checkboxs = group.querySelectorAll('.gd-checkbox')
        const paramKey = group.getAttribute('data-param-key')
        checkboxs.forEach(checkbox => {
            checkbox.addEventListener('click', e => {
                const input = checkbox.querySelector('input[type="checkbox"]')
                let value = checkbox.querySelector('.label').innerText
                if(input.checked) {
                    params[paramKey] = checkbox.getAttribute('value')
                } else {
                    params[paramKey] = undefined
                    value = undefined
                }

                const label = group.parentElement.previousElementSibling
                filterSelectedWrapEvent(e, {
                    label: label.innerText.replace(':',''),
                    paramKey: paramKey,
                    value: value
                })
                if(!gugeeGobal.isMobile) {
                    searchUser()
                }
            })
        })
    })
}

function filterSelectedWrapEvent(e, data) {
    if (!gugeeGobal.isMobile) {
        const selectedFilterItem = document.getElementById('selectedFilterItem')
        const selectedWrap = document.getElementById('selectedWrap')
        const selectedItem = selectedWrap && selectedWrap.querySelector('[data-label="' + data.label + '"]')
        if (selectedItem) {
            if(data.value) {
                selectedItem.querySelector('.selected-item__inner').innerHTML = '<span>' + data.label + ' : </span>' + data.value
            } else {
                selectedItem.remove()
                params[data.paramKey] = undefined
                if(!selectedWrap.innerHTML) {
                    selectedFilterItem.hide()
                }
                return false
            }
        } else {
            if(data.value) {
                const item = document.createElement('div')
                item.className = 'selected-item'
                item.setAttribute('data-label', data.label)
                const inner = document.createElement('div')
                inner.className = 'selected-item__inner'
                inner.innerHTML = '<span>' + data.label + ': </span>' + data.value
                item.appendChild(inner)
                const icon = document.createElement('i')
                icon.className = 'iconfont iconbuzhichi'
                icon.addEventListener('click', () => {
                    item.remove()
                    params[data.paramKey] = undefined
                    params.page = 1

                    if(e.target.classList.contains('gd-input')) {
                        e.target.value = ''
                    } else if(e.target.classList.contains('gd-option')) {
                        const parentEle = e.target.parentElement
                        if(data.label === 'Primary') {
                            clearSecondarySelect()
                        } else {
                            if(parentEle) {
                                parentEle.parentElement.parentElement.querySelector('.label').innerText = data.label
                                parentEle.querySelector('.is-active').classList.remove('is-active')
                                parentEle.querySelector('li:first-child').classList.add('is-active')
                            }
                        }
                    } else if(e.target.parentElement.classList.contains('gd-checkbox')) {
                        const group = e.target.parentElement.parentElement
                        group.querySelectorAll('input[type="checkbox"]').forEach(input => {
                            input.checked = false
                        })
                    } else {
                        // select-item
                        const oldEle = document.querySelector('[data-param-key="' + data.paramKey + '"]')
                        oldEle.querySelector('.is-active').classList.remove('is-active')
                        const newEle = oldEle.querySelector('[value="0"]') || oldEle.querySelector('li:first-child')
                        newEle.classList.add('is-active')
                    }

                    if(!selectedWrap.innerHTML) {
                        selectedFilterItem.hide()
                    }
                    // 是否是清空全部选项触发的点击事件
                    if(!isClearAll) {
                        searchUser()
                    }
                })
                item.appendChild(icon)
                selectedWrap.appendChild(item)
                selectedFilterItem.show('flex')
            }
        }
    }
}
function clearSecondarySelect() {
    const ele = document.querySelector('[data-label="Secondary"]')
    ele.parentElement.parentElement.querySelector('.label').innerText = 'Secondary'
    ele.innerHTML = ''
}
export {
    initInputEvent,
    initFilterSearch,
    filterSelectedWrapEvent
}
